<!--  -->
<template>
  <div>
    <div class="datePicker">
      <el-date-picker
        v-model="dateTime"
        format="yyyy - MM - dd "
        value-format="yyyy-MM-dd"
        @change="changeDate"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
    </div>
    <div>
      <div class="payData">
        <el-row>
          <el-col :span="4" class="visit">
            访客
          </el-col>
          <el-col :span="4">
            <p>浏览量</p>
            <p>129</p>
          </el-col>
          <el-col :span="4">
            <p>访客数</p>
            <p>10</p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="visit">
            下单
          </el-col>
          <el-col :span="4">
            <p>下单人数</p>
            <p>9</p>
          </el-col>
          <el-col :span="4">
            <p>下单笔数</p>
            <p>9</p>
          </el-col>
          <el-col :span="4">
            <p>下单金额</p>
            <p>1399.23</p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="visit">
            付款
          </el-col>
          <el-col :span="4">
            <p>付款人数</p>
            <p>2</p>
          </el-col>
          <el-col :span="4">
            <p>付款订单数</p>
            <p>2</p>
          </el-col>
          <el-col :span="4">
            <p>付款金额</p>
            <p>699.00</p>
          </el-col>
        </el-row>
      </div>
      <div ref="payChart" style="height:500px" id="payChart"></div>
    </div>
  </div>
</template>

<script>
export default {
  name:'payAnalysis',
  data () {
    return {
      dateTime: [],
      dateRange: [],
      payseries:[
            {
                name: '支付订单数',
                type: 'line',
                // stack: '总量',
                data: [0,0,0,0,0,0,0,0,1,0,0,3,0,0,0,0,1,2,1,1,0,0,0,0,0,0,0,0,0,0,3,1,0]
            },
            {
                name: '支付总金额',
                type: 'line',
                // stack: '总量',
                data: [0,0,0,0,0,0,0,0,100,0,0,222,0,0,0,0,12,21,10,14,0,0,0,0,0,0,0,0,0,0,303,108,0]
            },
            {
                name: '付款人数',
                type: 'line',
                // stack: '总量',
                data: [0,0,0,0,0,0,0,0,1,0,0,3,0,0,0,0,1,2,1,1,0,0,0,0,0,0,0,0,0,0,3,1,0]
            },
            {
                name: '支付转化率',
                type: 'line',
                // stack: '总量',
                data: ['0%','0%','0%','0%','0%','0%','0%','0%','20%','0%','0%','30%','0%','0%','0%','0%','0.7%','30%','0.1%','0.1%','0%','0%','0%','0%','0%','0%','0%','0%','0%','0%','30%','12%','0%']
            },
            {
                name: '下单转化率',
                type: 'line',
                // stack: '总量',
                data: ['0%','0%','0%','0%','0%','0%','0%','0%','20%','0%','0%','30%','0%','0%','0%','0%','0.7%','30%','0.1%','0.1%','0%','0%','0%','0%','0%','0%','0%','0%','0%','0%','30%','12%','0%']
            }
      ],
    }
  },
  watch: {
    dateRange(val) {
      this.drawPayChart()
    }
  },
  mounted() {
    this.defaultTime();
    this.drawPayChart()
  },
  methods:{
 
    drawPayChart(){
      let echarts = require('echarts')
      let payChart = echarts.init(this.$refs.payChart)
      let option={
        title:{
          text:'交易分析'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend:{

        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.dateRange
        },
        yAxis: {
            type: 'value'
        },
        series: this.payseries
      }
      payChart.setOption(option)
    },
    defaultTime() {
      let nowdate = new Date(new Date().getTime() - 30 * 24 * 60 * 60 * 1000);
      
      var y = nowdate.getFullYear().toString();
      var m = nowdate.getMonth()+1<10 ? '0' +(nowdate.getMonth()+1).toString():(nowdate.getMonth()+1).toString();
      var d = nowdate.getDate()<10?'0'+(nowdate.getDate()).toString():nowdate.getDate().toString();
      var formatwdate = y+'-'+m+'-'+d;
      console.log(formatwdate)
      //k开始时间
      let startTime = y + "-" + m + "-" + d;
      
      let date = new Date();
      let year = date.getFullYear().toString();
      let month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1).toString()
          : (date.getMonth() + 1).toString();
      let day =
        date.getDate() < 10
          ? "0" + date.getDate().toString()
          : date.getDate().toString();
      // //结束时间
      let endTime = year + "-" + month + "-" + day;
      this.dateTime = [startTime, endTime];
      this.dateRange = this.getDateInfo(startTime, endTime);
    },
    getDateInfo(start, end) {
      var result = [];
      var beginDay = start.split("-");
      var endDay = end.split("-");
      var diffDay = new Date();
      var dateList = new Array();
      var i = 0;
      diffDay.setDate(beginDay[2]);
      diffDay.setMonth(beginDay[1] - 1);
      diffDay.setFullYear(beginDay[0]);
      result.push(start);
      while (i == 0) {
        var countDay = diffDay.getTime() + 24 * 60 * 60 * 1000;
        diffDay.setTime(countDay);
        dateList[2] = diffDay.getDate();
        dateList[1] = diffDay.getMonth() + 1;
        dateList[0] = diffDay.getFullYear();
        if (String(dateList[1]).length == 1) {
          dateList[1] = "0" + dateList[1];
        }
        if (String(dateList[2]).length == 1) {
          dateList[2] = "0" + dateList[2];
        }
        result.push(dateList[0] + "-" + dateList[1] + "-" + dateList[2]);
        if (
          dateList[0] == endDay[0] &&
          dateList[1] == endDay[1] &&
          dateList[2] == endDay[2]
        ) {
          i = 1;
        }
      }
      // console.log(result);
      return result;
    },
    changeDate(val) {
      console.log(val);
      this.dateRange = this.getDateInfo(val[0], val[1]);
    },
  }
}
</script>

<style  scoped>
.datePicker {
  text-align: left;
  margin: 30px 20px;
}

h2 {
  font-size: 16px;
  text-align: left;
  padding-left: 20px;
  margin: 30px 0;
}
.payData{
  width: 95%;
  margin: 30px auto;
}
.payData .el-row{
  background-color: rgba(104,217,172,.05);
  height: 90px;
  margin-top: 20px;
}
#payChart{
  border-top: 1px solid #e6e6e6;
  padding-top: 50px;
  width: 95%;
  margin: 50px auto;
}
p{
  padding-top: 20px;
}
.visit{
  background-color: rgba(104,218,174);
  height: 100%;
  line-height: 90px;
}
</style>
